import React from 'react';
import { Card, List } from 'antd';

const HotNewsWidget: React.FC = () => {
  const news = [
    { id: 1, title: '科技新闻：AI技术新突破', views: '1.2k', time: '30分钟前' },
    { id: 2, title: '经济动态：市场行情分析', views: '856', time: '1小时前' },
    { id: 3, title: '社会热点：环保政策更新', views: '642', time: '2小时前' },
    { id: 4, title: '体育资讯：世界杯最新战况', views: '423', time: '3小时前' },
  ];

  return (
    <Card 
      title="今日热点" 
      size="small" 
      className="h-full"
      styles={{ body: { padding: '8px' } }}
    >
      <List
        size="small"
        dataSource={news}
        renderItem={(item, index) => (
          <List.Item className="px-2 py-1">
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center space-x-2 flex-1">
                <span className="text-xs font-bold text-gray-400 w-4">
                  {index + 1}
                </span>
                <span className="text-sm truncate">{item.title}</span>
              </div>
              <div className="text-xs text-gray-400 flex items-center space-x-1">
                <i className="i-mdi-eye text-xs" />
                <span>{item.views}</span>
              </div>
            </div>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default HotNewsWidget;